<template>
    <view class="py-datetime-picker">
        <u-tag :text="title" v-if="tagShow" @click="datePickerShow = true;"></u-tag>
        <u-tag :text="dateTagText" plain v-else @click="datePickerShow = true;"></u-tag>
        <u-datetime-picker :show="datePickerShow" :showToolbar="showToolbar" v-model="currentValue" :title="title"
            :mode="mode" :maxDate="maxDate" :minDate="minDate" :minHour="minHour" :maxHour="maxHour"
            :minMinute="minMinute" :maxMinute="maxMinute" :filter="filter" :formatter="formatter" :loading="loading"
            :itemHeight="itemHeight" :cancelText="cancelText" :confirmText="confirmText" :cancelColor="cancelColor"
            :confirmColor="confirmColor" :visibleItemCount="visibleItemCount" :defaultIndex="defaultIndex"
            :immediateChange="immediateChange" closeOnClickOverlay @cancel="datePickerShow = false;"
            @close="datePickerShow = false;" @confirm="handleConfirm"></u-datetime-picker>
    </view>
</template>
<script>
    import { parseTime } from "@/utils/ruoyi";
    export default {
        name: "PyDatetimePicker",
        props: {
            // 是否展示顶部的操作栏
            showToolbar: {
                type: Boolean,
                default: uni.$u.props.datetimePicker.showToolbar
            },
            // 绑定值
            value: {
                type: [String, Number, Date],
                default: uni.$u.props.datetimePicker.value
            },
            // 顶部标题
            title: {
                type: String,
                default: uni.$u.props.datetimePicker.title
            },
            // 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
            mode: {
                type: String,
                default: uni.$u.props.datetimePicker.mode
            },
            // 可选的最大时间
            maxDate: {
                type: Number,
                // 最大默认值为后10年
                default: uni.$u.props.datetimePicker.maxDate
            },
            // 可选的最小时间
            minDate: {
                type: Number,
                // 最小默认值为前10年
                default: uni.$u.props.datetimePicker.minDate
            },
            // 可选的最小小时，仅mode=time有效
            minHour: {
                type: Number,
                default: uni.$u.props.datetimePicker.minHour
            },
            // 可选的最大小时，仅mode=time有效
            maxHour: {
                type: Number,
                default: uni.$u.props.datetimePicker.maxHour
            },
            // 可选的最小分钟，仅mode=time有效
            minMinute: {
                type: Number,
                default: uni.$u.props.datetimePicker.minMinute
            },
            // 可选的最大分钟，仅mode=time有效
            maxMinute: {
                type: Number,
                default: uni.$u.props.datetimePicker.maxMinute
            },
            // 选项过滤函数
            filter: {
                type: [Function, null],
                default: uni.$u.props.datetimePicker.filter
            },
            // 选项格式化函数
            formatter: {
                type: [Function, null],
                default: uni.$u.props.datetimePicker.formatter
            },
            // 是否显示加载中状态
            loading: {
                type: Boolean,
                default: uni.$u.props.datetimePicker.loading
            },
            // 各列中，单个选项的高度
            itemHeight: {
                type: [String, Number],
                default: uni.$u.props.datetimePicker.itemHeight
            },
            // 取消按钮的文字
            cancelText: {
                type: String,
                default: uni.$u.props.datetimePicker.cancelText
            },
            // 确认按钮的文字
            confirmText: {
                type: String,
                default: uni.$u.props.datetimePicker.confirmText
            },
            // 取消按钮的颜色
            cancelColor: {
                type: String,
                default: uni.$u.props.datetimePicker.cancelColor
            },
            // 确认按钮的颜色
            confirmColor: {
                type: String,
                default: uni.$u.props.datetimePicker.confirmColor
            },
            // 每列中可见选项的数量
            visibleItemCount: {
                type: [String, Number],
                default: uni.$u.props.datetimePicker.visibleItemCount
            },
            // 是否允许点击遮罩关闭选择器
            closeOnClickOverlay: {
                type: Boolean,
                default: uni.$u.props.datetimePicker.closeOnClickOverlay
            },
            // 各列的默认索引
            defaultIndex: {
                type: Array,
                default: uni.$u.props.datetimePicker.defaultIndex
            },
            immediateChange: {
                type: Boolean,
                default: uni.$u.props.datetimePicker.immediateChange
            }
        },
        data() {
            return {
                // 是否显示标签
                tagShow: true,

                // 日期选择器是否显示
                datePickerShow: false,

                // 日期标签内容
                dateTagText: "",

                // 当前值
                currentValue: undefined,

                // 是否有默认值
                hasDefaultValue: false
            }
        },
        created() {
            let value = this.value
            if (value) {
                this.hasDefaultValue = true;
                if (value.constructor == Date) {
                    this.currentValue = value.toISOString();
                } else {
                    this.currentValue = this.value;
                }
            }
            // 转换日期格式
            this.convertDate(this.currentValue);
        },
        watch: {
            currentValue: function (newVal, oldVal) {
                if (newVal && !this.hasDefaultValue) {
                    let mode = this.mode;
                    let currentDate = undefined;
                    switch (mode) {
                        case "date":
                            // 转换为国际标准时间
                            currentDate = new Date(newVal).toISOString();
                            break;
                        case "time":
                            let tempDate = new Date();
                            let timeList = newVal.split(":");
                            tempDate.setHours(timeList[0]);
                            tempDate.setMinutes(timeList[1]);
                            currentDate = tempDate.toISOString();
                            break;
                        case "datetime":
                            // 转换为国际标准时间
                            currentDate = new Date(newVal).toISOString();
                            break;
                        case "year-month":
                            // 转换为国际标准时间
                            currentDate = new Date(newVal).toISOString();
                            break;
                        default:
                            break;
                    }

                    this.$emit("input", currentDate);
                } else {
                    this.hasDefaultValue = false;
                }

            }
        },
        methods: {
            // 处理确定操作
            handleConfirm(item) {

                let value = item && item.value;
                this.convertDate(value);
            },

            // 转换日期
            convertDate(currentDate) {
                if (currentDate) {
                    let mode = this.mode;
                    switch (mode) {
                        case "date":
                            this.handleDate(currentDate);
                            break;
                        case "time":
                            this.handleTime(currentDate);
                            break;
                        case "datetime":
                            this.handleDateTime(currentDate);
                            break;
                        case "year-month":
                            this.handleYearMonth(currentDate);
                            break;
                        default:
                            break;
                    }
                }

            },

            // 处理日期
            handleDate(currentDate) {
                this.dateTagText = parseTime(currentDate, "{y}-{m}-{d}");
                this.datePickerShow = false;
                this.tagShow = false;
            },

            // 处理时间
            handleTime(currentDate) {
                // 如果没有包含年月日等信息，直接赋值。否则，获取小时和分钟
                if (currentDate.length == 5) {
                    this.dateTagText = currentDate;
                } else {
                    let tempDate = new Date(currentDate);
                    let currentHours = tempDate.getHours();
                    let currentMinutes = tempDate.getMinutes();
                    this.dateTagText = currentHours + ":" + currentMinutes;
                }

                this.datePickerShow = false;
                this.tagShow = false;
            },

            // 处理日期时间
            handleDateTime(currentDate) {
                this.dateTagText = parseTime(currentDate, "{y}-{m}-{d} {h}:{i}");
                this.datePickerShow = false;
                this.tagShow = false;
            },

            // 处理年月
            handleYearMonth(currentDate) {
                this.dateTagText = parseTime(currentDate, "{y}-{m}");
                this.datePickerShow = false;
                this.tagShow = false;
            }
        },
    }
</script>
<style lang="css" scoped>
    /* #ifdef MP-WEIXIN */
    .py-datetime-picker {
        display: flex;
        width: fit-content;
    }

    /* #endif */
</style>